<template>
    <van-popup :close-on-click-overlay="false" v-model="show" class="mypop">
        <div class="item" @click="openFile">从相册中选择</div>
        <div><input @change="changeImg" ref="myfile" style="display: none" type="file"></div>
        <div class="item">拍照</div>
        <div @click="show=false" class="item">取消</div>
    </van-popup>
</template>

<script>
// 注册上传组 件
import Vue from 'vue'
import { ImagePreview } from 'vant'

// 导入上传图片的接口
import { apiUploadPhoto } from '../../../api/user'
Vue.use(ImagePreview)

export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    // 打开图片选择器
    openFile () {
      this.$refs.myfile.click()
    },
    // 选中图片的改变事件
    changeImg () {
      // 得到选择的图片
      var file = this.$refs.myfile.files[0]
      // 将图片对象转为一个图片地址
      // var path = URL.createObjectURL(file)
      var reader = new FileReader()
      // 开启转换
      reader.readAsDataURL(file)
      // 接收转换的结果
      reader.addEventListener('load', () => {
        // 得到转换后的结果
        var path = reader.result
        // 预览图片
        ImagePreview({
          images: [path],
          // 预览框的关闭事件
          onClose: this.closePreview
        })
      })
    },
    // 自己定义的关闭事件
    closePreview () {
      // 关闭上传面板
      this.show = false
      this.$dialog.confirm({
        title: '提示',
        message: '是否将图片设置为头像'
      }).then(async () => {
        // 得到选中的图片
        var file = this.$refs.myfile.files[0]
        // 将用户头像上传到服务器
        var res = await apiUploadPhoto(file)
        // 得到返回的图片路径
        var photo = res.data.data.photo
        // 将图片渲染到个人信息的头像中
        this.$emit('changephoto', photo)
        // 提示用户上传成功
        this.$toast.success('头像修改成功')
      }).catch(() => {
        console.log('取消')
      })
    }
  }
}
</script>

<style lang="less">
.mypop {
    width: 90%;
    border-radius: 5px;
    .item {
        text-align: center;
        line-height: 40px;
        color: #666;
        font-size: 14px;
        &:nth-child(2) {
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
    }
}
</style>
